<template>
	<s-pull-scroll class="s-pull-scroll wrap" :down-offset="120" showDownSuccess="true" ref="pullScroll"
		:pullDown="pullDown">
		<view class="page-main">
			<view class="wrap">
				<!--			选项卡START -->
				<view class="u-tabs-box" style="">
					<u-tabs-swiper activeColor="#004fbf" ref="tabs" :list="list" :current="current" @change="change"
						:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
				</view>
				<!--			选项卡END  -->
				<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
					@animationfinish="animationfinish">
					<!--	 一个tab START 			-->
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="reachBottom">
							<view class="page-box">
								<view class="follow-list">
									<my-house-card :tag-name="'租'" v-for="(item, index) in historyList" :key="index"
										:item="{ ...item, itemIndex: index }" :meta="{ browse: 1 }"
										@deleteDone="updateList(index, historyList)" :display-build-mode="false">
									</my-house-card>
									<uni-load-more v-show="showLoading" class="loadMore" status="nomore" iconType="snow" :icon-size="12"
										:content-text="contentText"></uni-load-more>
								</view>
							</view>
						</scroll-view>
					</swiper-item>

					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="reachBottom">
							<view class="page-box">
								<view class="follow-list">
									<my-house-card :tag-name="'售'" v-for="(item, index) in historyList2" :key="index"
										:meta="{ browse: 1 }" :item="{ ...item, itemIndex: index }"
										:display-build-mode="false" @deleteDone="updateList(index, historyList2)">
									</my-house-card>
									<uni-load-more v-show="showLoading" class="loadMore" status="nomore" iconType="snow" :icon-size="12"
										:content-text="contentText"></uni-load-more>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</s-pull-scroll>
</template>

<script>
	import {
		filter
	} from '@/util/reuse/filter';
	import myHouseCard from '../../components/myHouseCard';
	import {
		tokenRequest
	} from '../../util/network';
	import {
		appMixin,
		pullDownRefresh,
		resetDataForPullDown,
	} from '../../util/reuse';
	import {
		resetComponentData
	} from '../../util/funcs';

	export default {
		mixins: [filter, pullDownRefresh, appMixin],
		data() {
			return {
				userToken: '',
				list: [{
						name: '写字楼 (租)',
					},
					{
						name: '写字楼 (售)',
					},
				],
				historyList: [{
						notLoaded: true
					},
					{
						notLoaded: true
					},
					{
						notLoaded: true
					},
					{
						notLoaded: true
					},
					{
						notLoaded: true
					},
				],
				historyList2: [{
						notLoaded: true
					},
					{
						notLoaded: true
					},
					{
						notLoaded: true
					},
					{
						notLoaded: true
					},
					{
						notLoaded: true
					},
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				// houseType: 1, //  1 出租 2 出售
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
			};
		},
		components: {
			myHouseCard
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return (val) => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return (val) => {};
			},
		},
		methods: {
			updateList(itemIndex, list) {
				list.splice(itemIndex, 1);
			},
			reachBottom() {
				// 此tab为空数据
				if (this.current !== 2) {
					this.loadStatus.splice(this.current, 1, 'loading');
					setTimeout(() => {
						this.getMyFollowList(this.current);
					}, 1200);
				}
			},
			// 页面数据
			getMyFollowList(idx) {
				//页面初始化获取预约
			},

			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				this.getMyFollowList(index); // 按照常规, 应该是在切换的一刹那进行数据请求
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			async initPageData() {
				resetDataForPullDown.call(this);

				// 此列表页下, 遇到3的类型需要进行转换
				function washTag(list, type) {
					for (let i = 0, len = list.length; i < len; i++) {
						if (list[i].house_sell_type === 3) {
							list[i].house_sell_type = type;
						}
					}
				}
				let proArr = [];
				proArr.push(
					new Promise((resolve,reject) => {
						tokenRequest(
							'/history_list', {}, {
								data: {
									type: 1,
								},
								success: ({
									data
								}) => {
									// console.log('浏览记录 租data : ', data);
									this.historyList = data.data;
									washTag(this.historyList, 1);

									resolve({
										data
									});
								},
								fail: (res) => {
                  this.$tips('网络异常')
									reject(res);
								},
							},
							true
						);
					}).catch(()=>{
            this.$refs.pullScroll.success();
          })
				);

				proArr.push(
					new Promise((resolve,reject) => {
						tokenRequest(
							'/history_list', {}, {
								data: {
									token: this.userToken,
									type: 2,
								},
								success: ({
									data
								}) => {
									// console.log('浏览记录 售data : ', data);

									this.historyList2 = data.data;
									washTag(this.historyList2, 2);
									resolve({
										data
									});
								},
								fail: (res) => {
                  this.$tips('网络异常')
									reject(res);
								},
							},
							true
						);
					}).catch(()=>{
            this.$refs.pullScroll.success();
          })
				);
				let res = await Promise.all(proArr);
				// console.log(res)
			},
		},
		mounted() {
			this.initPageData();
		},
	};
</script>

<style>
	.page {
		height: 100%;
		background-color: #f2f2f2;
	}
</style>

<style lang="scss" scoped>
	@import '../../assets/styles/global';

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		padding-top: 10px;
		flex: 1;
		background-color: white;
		@include center;
		flex-direction: column;

		.page-box {
			padding-left: 15px;
			padding-right: 15px;
		}
	}

	.swiper-item {
		height: 100%;
	}
</style>
